<template>
	<view class="wrapper">
		<view aria-hidden="true">
			<view class="text-center text-lg text-orange">请拍照识别<text class="text-red">{{bankData.name}}</text>银行卡信息</view>
		</view>
		<view aria-hidden="true" class="margin-tb-sm">
		<!-- #ifdef MP-WEIXIN -->
			<ocr-navigator @onSuccess="onSuccess" certificateType="bankCard">
				<image :src="img_src + 'ocr.png'" class="text-center" style="height: 172px;display: block;margin: auto;width: 270px;"></image>
			</ocr-navigator>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view>
				<image class="image-a" :src="img_src + 'ocr.png'"></image>
			</view>
			<!-- #endif -->
		</view>
		<view aria-hidden="true">
			<view class="text-center text-lg">或手动输入银行卡信息	</view>
		</view>
		<!-- <view aria-role="tab" class="text-gray text-center">请拍照识别  的银行卡</view> -->
		<form>
			<view aria-role="tab" class="cu-form-group margin-t" style="border-top: 0;">
				<view class="title">姓名</view>
			</view>
			<view class="margin-l">
				<input aria-role="textbox" class="input text-gray" type="text" v-model="bankData.name" :disabled="disabled" />
			</view>
			<view aria-role="tab" class="cu-form-group">
				<view class="title">银行卡号</view>
			</view>
			<view class="margin-l">
				<input aria-role="textbox" placeholder="请拍照识别银行卡号" class="input text-gray" type="text" v-model="bankData.bankNo" :disabled="disabled"/>
			</view>
			
			<view aria-role="tab" class="cu-form-group">
				<view class="title">银行名称</view>
			</view>
			<view class="margin-l">
				<input aria-role="textbox" placeholder="请拍照识别银行名称" class="input text-gray" type="text" v-model="bankData.bankNa" />
			</view>
			<view class="cu-form-group default-row">
				<text aria-role="tab" class="tit">设为默认</text>
				<switch aria-role="switch" :checked="bankData.deftIs" color="#fa436a" @change="switchChange" />
			</view>
		</form>
		<view class="padding flex flex-direction">
			<button aria-role="button" class="cu-btn bg-blue margin-tb-sm lg" @click="saveBank">保存</button>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				disabled: true,
				bankData: {
					name: '',
					bankNa: '',
					bankNo: '',
					deftIs: 0,
					bankCo: '',
					bankIc: '',
					state: '1'
				},
				img_src: this.$utils.SYS_URL + this.$utils.IMG_URL,
			}
		},
		onLoad() {
			this.bankData.name = this.users.citizenName;
		},
		computed: {
			...mapState(['users'])
		},
		methods: {
			onSuccess(res) {
				let that = this;
				this.img = res.detail.image_path;
				this.bankData.bankNo = res.detail.number.text; 
				let params = {bankNo:res.detail.number.text};
				this.$request.getForm('/unia/alipay/bank',params).then(res => {
					that.bankData.bankNa = res.data.bankNa;
					that.bankData.bankCo = res.data.bankCo;
					that.bankData.bankIc = res.data.bankIc;
				})
			},
			saveBank(){
				const that = this
				if(!this.bankData.bankNo){
					this.$utils.msg('银行卡号不能为空');
					return;
				}
				if (!this.bankData.bankNa) {
					that.$utils.msg('银行名称不能为空');
					return
				}
				this.bankData.uid = this.users.uid;
				that.$request.postJson('/view/uacid/bank-save', that.bankData).then(res => {
					that.$utils.prePage().refreshList();
					uni.navigateBack('/page-user/users/ubank-list')
				})
			},

			switchChange(e){
				this.bankData.deftIs = e.detail.value?1:0
			},
			
			add() {
			}
		}

	}
</script>
<style lang='scss'>
	page {
		background: #fff;
	}
	.cu-form-group {
		border-top: 0.5px solid #eee;
	}

	.margin-t {
		margin-top: 27upx;
	}

	.margin-l {
		margin-left: 26upx;
	}
	.text-font {
		font-size: 40upx;
		margin-left: 136upx;
		margin-top: 57upx;;
	}
	.default-row{
		margin-top: 16upx;
		switch{
			transform: translateX(16upx) scale(.9);
		}
	}
	.image-a {
		height: 364upx;
		left: 91upx;
		top: 40upx;
	}

	.cu-form-group .title {
		text-align: justify;
		padding-right: 16px;
		font-size: 16px;
		position: relative;
		height: 33px;
		line-height: 33px;
		margin-right: 61px;
	}

</style>
